<!--  -->
<template>
  <div class="main">
    <!-- 通用设置 -->
    <div class="conent-box">
      <h1 class="title-con">员工管理</h1>
      <div class="title-con1">
        <div class="conter-text">
          <staffsereen></staffsereen>
        </div>
        <div class="conter-con">
          <ployeelist :tileaa="ti"></ployeelist>
          <div class="conter-foot">
            <div class="dibu-box">
              <!-- 全选 -->
              <div>
                <input type="checkbox" name id @click="quanxuan" :checked="ti" />
                <label for class="che-text">全选</label>
                <span class="che-text yuang">批量删除员工</span>
              </div>

              <div>
                <el-pagination background layout="prev, pager, next" :total="70"></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import staffsereen from "../components/staffsereen";
import ployeelist from "../components/ployeelist";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    staffsereen,
    ployeelist,
  },
  data() {
    //这里存放数据
    return {
      ti: false,
      //    true
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    quanxuan() {
      if (this.ti) {
        this.ti = false;
      } else {
        this.ti = true;
      }
    },
  },
};
</script>
<style  scoped>
.title-con {
  color: rgb(145, 55, 243);
  font-size: 24px;
  line-height: 70px;
  margin: 0px 0 20px 16px;
}
.main {
  width: 100%;
  height: 100%;
}
.conent-box {
  margin: 0 auto;
  width: 1140px;
  height: 100%;
}
.conter-text {
  position: relative;
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
  height: 210px;
  border: 1px solid #ccc;
  bottom: 20px;
}
.conter-con {
  width: 1098px;
  height: 1155px;
  margin:  0 auto;
  border: 1px solid #ccc;
  padding: 22px 30px 0 30px;
}
.conter-foot {
  margin-top: 60px;
}
.che-text {
  margin-left: 20px;
}
.yuang {
  color: #ccc;
}
.dibu-box {
  display: flex;
  justify-content: space-between;
}
</style>